Skip to content

perf: 优化开发者模式编辑交互#266

Merged
SurviveM merged 2 commits intoawsl-project:mainfrom
ymkiux:feat/api-token-dev-mode-ui
Feb 26, 2026
Merged

perf: 优化开发者模式编辑交互#266
SurviveM merged 2 commits intoawsl-project:mainfrom
ymkiux:feat/api-token-dev-mode-ui

Conversation

@ymkiux
Copy link
Contributor

@ymkiux ymkiux commented Feb 26, 2026

Summary

  • 开发者模式开关移入编辑弹窗并与文本并排
  • 变更仅在保存时提交,避免误触

Testing

  • 未运行(UI 变更)

Summary by CodeRabbit

  • 用户界面改进
    • 简化了API令牌管理界面:将“开发模式”设置从列表视图移至创建/编辑对话框内,列表更简洁。
    • 在创建和编辑对话框中加入了“开发模式”开关与状态徽章,编辑时会初始化为令牌当前值。
    • 优化对话框打开/关闭行为,关闭时会重置表单与状态,避免残留设置。

@coderabbitai
Copy link

coderabbitai bot commented Feb 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b5913c and 0775a27.

📒 Files selected for processing (1)
  • web/src/pages/api-tokens/index.tsx
📜 Recent review details
🧰 Additional context used
🧬 Code graph analysis (1)
web/src/pages/api-tokens/index.tsx (2)
web/src/components/ui/index.ts (3)
  • Switch (51-51)
  • DialogFooter (42-42)
  • Button (2-2)
web/src/components/ui/button.tsx (1)
  • Button (58-58)
🔇 Additional comments (8)
web/src/pages/api-tokens/index.tsx (8)

1-1: LGTM!

使用 useId 生成稳定的唯一 ID 是正确的做法,可确保 SSR 与客户端渲染的一致性,同时为表单控件提供可访问性支持。

Also applies to: 76-76


83-83: LGTM!

devMode 状态管理正确,默认值为 false,并在表单重置时正确清理。

Also applies to: 91-91


95-98: LGTM!

将关闭编辑对话框的逻辑抽取为 closeEditDialog 辅助函数是良好的重构,确保了状态清理的一致性。


132-132: LGTM!

在更新请求中包含 devMode 字段,符合 PR 目标——仅在编辑对话框中管理开发者模式。


161-161: LGTM!

使用 !!token.devMode 安全地处理 undefined/null 转换为 false


484-488: LGTM!

onOpenChange 正确调用 closeEditDialog,确保无论通过何种方式关闭对话框(X 按钮、ESC、点击背景)都能正确清理状态。


552-570: LGTM! 可访问性问题已修复。

labelhtmlForSwitchid 正确关联,读屏器现在可以正确识别控件语义。过往评审中指出的可访问性问题已得到解决。


572-576: LGTM!

取消按钮正确使用 closeEditDialog,与其他关闭机制保持一致。


📝 Walkthrough

Walkthrough

将 API 令牌页面中的 devMode 从表格列移除,改为在创建与编辑对话框中作为内联开关管理;创建/编辑请求中包含 devMode;对话框关闭和表单重置逻辑更新以清理 devMode 状态和编辑态。

Changes

Cohort / File(s) Summary
API 令牌页面 — devMode 重构
web/src/pages/api-tokens/index.tsx
新增devMode状态和创建/编辑对话框内的开关与徽章;将 devMode 纳入创建/更新请求负载;移除表格中的 devMode 列与行级切换;新增 closeEditDialog 清理函数并调整对话框 open/close 与表单重置逻辑。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • feat: 增加 API 令牌开发者模式 #265: 同样修改了 web/src/pages/api-tokens/index.tsx 中的 devMode 行为(之前 PR 添加了行级 devMode 切换,本 PR 将其迁移为对话框内控件并修改请求负载)。

Suggested reviewers

  • SurviveM

Poem

🐰 我是小兔写代码,devMode 搬进对话框,
表格少了一列也不慌,表单关掉状态还原香,
创建编辑手牵手,令牌世界更整齐欢畅。 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰准确地概括了主要变更:将开发者模式开关从每行的列移至编辑弹窗,优化了交互流程。

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
web/src/pages/api-tokens/index.tsx (1)

481-486: 编辑弹窗关闭逻辑可抽取为单一方法。

Line 481-486 与 Line 569-572 的关闭/清理逻辑重复,建议抽成 closeEditDialog(),减少后续状态字段增加时的漏改风险。

Also applies to: 566-573

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@web/src/pages/api-tokens/index.tsx` around lines 481 - 486, The onOpenChange
handler duplicates cleanup logic (calling setEditingToken(null) and resetForm())
in multiple places; extract that into a single function named closeEditDialog()
and replace the repeated blocks at the onOpenChange sites (and the similar logic
around lines referenced, e.g., the blocks that currently call
setEditingToken(null) and resetForm() at the other dialog close handlers) with a
call to closeEditDialog(), ensuring all dialog-close paths invoke it so future
state additions only need one update.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@web/src/pages/api-tokens/index.tsx`:
- Around line 550-559: The label for the developer mode switch is not
programmatically associated with the Switch component (label text at the JSX
around {t('apiTokens.devMode')}), so assistive tech may not announce it; update
the markup to add a unique id (e.g., devModeSwitchId) used as htmlFor on the
label and passed to the Switch component (or add an aria-label/aria-labelledby
prop on the Switch) while preserving the existing props (checked={devMode},
onCheckedChange={setDevMode}, disabled={updateToken.isPending}) so the control
becomes accessible to screen readers.

---

Nitpick comments:
In `@web/src/pages/api-tokens/index.tsx`:
- Around line 481-486: The onOpenChange handler duplicates cleanup logic
(calling setEditingToken(null) and resetForm()) in multiple places; extract that
into a single function named closeEditDialog() and replace the repeated blocks
at the onOpenChange sites (and the similar logic around lines referenced, e.g.,
the blocks that currently call setEditingToken(null) and resetForm() at the
other dialog close handlers) with a call to closeEditDialog(), ensuring all
dialog-close paths invoke it so future state additions only need one update.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 171c86d and 2b5913c.

📒 Files selected for processing (1)
  • web/src/pages/api-tokens/index.tsx
📜 Review details
🧰 Additional context used
🧬 Code graph analysis (1)
web/src/pages/api-tokens/index.tsx (2)
web/src/components/ui/index.ts (3)
  • Switch (51-51)
  • DialogFooter (42-42)
  • Button (2-2)
web/src/components/ui/button.tsx (1)
  • Button (58-58)
🔇 Additional comments (1)
web/src/pages/api-tokens/index.tsx (1)

118-127: devMode 的“编辑后保存提交”链路实现正确。

Line 126 将 devMode 并入更新 payload,且 Line 158 在进入编辑态时正确回填,和 Line 90 的重置逻辑配合良好,行为与 PR 目标一致。

Also applies to: 152-159

@SurviveM SurviveM merged commit 8bfe2e5 into awsl-project:main Feb 26, 2026
2 checks passed
@ymkiux ymkiux deleted the feat/api-token-dev-mode-ui branch February 26, 2026 09:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants